<div class="field">
  <label>Customize Badge Layout</label>
</div>
<div class="ui unstackable grid">
  <div class="five column row">
    <div class="center aligned column">
      Field Type
    </div>
    <div class="center aligned column">
      Font Type
    </div>
    <div class="center aligned column">
      Font Color
    </div>
    <div class="center aligned column">
      Font Size
    </div>
    <div>
    </div>
  </div>
  <div class="five column row">
    <div class="center aligned column labels"></div>
    <div class="center aligned column labels">
      <div class="field">
        <div class="ui checkbox">
          {{input name="fonttypeall" type="checkbox" checked=fonttypeall}}
          <label>Apply to all</label>
        </div>
      </div>
    </div>
    <div class="center aligned column">
      <div class="field">
        <div class="ui checkbox">
          {{input name="fontcolall" type="checkbox" checked=fontcolall}}
          <label>Apply to all</label>
        </div>
      </div>
    </div>
    <div class="center aligned column">
      <div class="field">
        <div class="ui checkbox">
          {{input name="fontsizeall" type="checkbox" checked=fontsizeall}}
          <label>Apply to all</label>
        </div>
      </div>
    </div>
    <div class="center aligned column">Adjust long content to width automatically</div>
  </div>
  <div class="five column row">
    <div class="center aligned column labels">First Name</div>
    <div class="center aligned column">
      <div class="one wide column">
        {{#ui-dropdown class="selection" selected=fonttype1  onChange=(action (mut fonttype1))}}
          <div class="default text">Helvetica</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="Lato" style="font-family:'Lato'">Lato</div>
            <div class="item" data-item="sans" style="font-family:'sans'">Sans</div>
            <div class="item" data-item="Courier-Bold" style="font-family:'Courier-Bold'">Courier</div>
            <div class="item" data-item="Helvetica" style="font-family:'Helvetica'">Helvetica</div>
            <div class="item" data-item="Times-Bold" style="font-family:'Times-Bold'">Times-Bold</div>
            <div class="item" data-item="monospace" style="font-family:'monospace'">Mono Space</div>
            <div class="item" data-item="Times-Roman" style="font-family:'Times-Roman'">Times-Roman</div>
            <div class="item" data-item="Courier 10 Pitch" style="font-family:'Courier 10 Pitch'">Courier 10 Pitch</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column ">
      <div class="one wide column">
        {{col-pick-input value=fontcol1 onChange=(action (mut fontcol1)) }}
      </div>
    </div>
    <div class="center aligned column">
      <div class="one wide cloumn">
        {{#ui-dropdown class="selection" selected=font1 onChange=(action (mut font1))}}
          <div class="default text">10</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="7">7</div>
            <div class="item" data-item="8">8</div>
            <div class="item" data-item="9">9</div>
            <div class="item" data-item="10">10</div>
            <div class="item" data-item="11">11</div>
            <div class="item" data-item="12">12</div>
            <div class="item" data-item="13">13</div>
            <div class="item" data-item="14">14</div>
            <div class="item" data-item="15">15</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>

    <div class="center aligned column ">
      <div class="ui toggle checkbox">
        <input name="public" type="checkbox" checked="checked">
        <label></label>
      </div>
    </div>
  </div>
  <div class="five column row">
    <div class="center aligned column labels">Last Name</div>
    <div class="center aligned column  ">
      <div class="one wide column">
        {{#ui-dropdown class="selection" selected=fonttype2 onChange=(action (mut fonttype2))}}
          <div class="default text">Helvetica</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="Lato" style="font-family:'Lato'">Lato</div>
            <div class="item" data-item="sans" style="font-family:'sans'">Sans</div>
            <div class="item" data-item="Courier-Bold" style="font-family:'Courier-Bold'">Courier</div>
            <div class="item" data-item="Helvetica" style="font-family:'Helvetica'">Helvetica</div>
            <div class="item" data-item="Times-Bold" style="font-family:'Times-Bold'">Times-Bold</div>
            <div class="item" data-item="monospace" style="font-family:'monospace'">Mono Space</div>
            <div class="item" data-item="Times-Roman" style="font-family:'Times-Roman'">Times-Roman</div>
            <div class="item" data-item="Courier 10 Pitch" style="font-family:'Courier 10 Pitch'">Courier 10 Pitch</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column ">
      <div class="one wide column">
        {{col-pick-input value=fontcol2 onChange=(action (mut fontcol2)) }}
      </div>
    </div>
    <div class="center aligned column">
      <div class="one wide cloumn">
        {{#ui-dropdown class="selection" selected=font2 onChange=(action (mut font2))}}
          <div class="default text">10</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="7">7</div>
            <div class="item" data-item="8">8</div>
            <div class="item" data-item="9">9</div>
            <div class="item" data-item="10">10</div>
            <div class="item" data-item="11">11</div>
            <div class="item" data-item="12">12</div>
            <div class="item" data-item="13">13</div>
            <div class="item" data-item="14">14</div>
            <div class="item" data-item="15">15</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column">
      <div class="ui toggle checkbox">
        <input name="public" type="checkbox" checked="checked">
        <label></label>
      </div>
    </div>
  </div>

  <div class="five column row">
    <div class="center aligned column labels">Designation</div>
    <div class="center aligned column  ">
      <div class="one wide column">
        {{#ui-dropdown class="selection" selected=fonttype3 onChange=(action (mut fonttype3))}}
          <div class="default text">Helvetica</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="Lato" style="font-family:'Lato'">Lato</div>
            <div class="item" data-item="sans" style="font-family:'sans'">Sans</div>
            <div class="item" data-item="Courier-Bold" style="font-family:'Courier-Bold'">Courier</div>
            <div class="item" data-item="Helvetica" style="font-family:'Helvetica'">Helvetica</div>
            <div class="item" data-item="Times-Bold" style="font-family:'Times-Bold'">Times-Bold</div>
            <div class="item" data-item="monospace" style="font-family:'monospace'">Mono Space</div>
            <div class="item" data-item="Times-Roman" style="font-family:'Times-Roman'">Times-Roman</div>
            <div class="item" data-item="Courier 10 Pitch" style="font-family:'Courier 10 Pitch'">Courier 10 Pitch</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column ">
      <div class="one wide column">
        {{col-pick-input value=fontcol3 onChange=(action (mut fontcol3)) }}
      </div>
    </div>
    <div class="center aligned column">
      <div class="one wide cloumn">
        {{#ui-dropdown class="selection" selected=font3 onChange=(action (mut font3))}}
          <div class="default text">10</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="7">7</div>
            <div class="item" data-item="8">8</div>
            <div class="item" data-item="9">9</div>
            <div class="item" data-item="10">10</div>
            <div class="item" data-item="11">11</div>
            <div class="item" data-item="12">12</div>
            <div class="item" data-item="13">13</div>
            <div class="item" data-item="14">14</div>
            <div class="item" data-item="15">15</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column">
      <div class="ui toggle checkbox">
        <input name="public" type="checkbox" checked="checked">
        <label></label>
      </div>
    </div>
  </div>
  <div class="five column row">
    <div class="center aligned column labels">Organization</div>
    <div class="center aligned column  ">
      <div class="one wide column">
        {{#ui-dropdown class="selection" selected=fonttype4 onChange=(action (mut fonttype4))}}
          <div class="default text">Helvetica</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="Lato" style="font-family:'Lato'">Lato</div>
            <div class="item" data-item="sans" style="font-family:'sans'">Sans</div>
            <div class="item" data-item="Courier-Bold" style="font-family:'Courier-Bold'">Courier</div>
            <div class="item" data-item="Helvetica" style="font-family:'Helvetica'">Helvetica</div>
            <div class="item" data-item="Times-Bold" style="font-family:'Times-Bold'">Times-Bold</div>
            <div class="item" data-item="monospace" style="font-family:'monospace'">Mono Space</div>
            <div class="item" data-item="Times-Roman" style="font-family:'Times-Roman'">Times-Roman</div>
            <div class="item" data-item="Courier 10 Pitch" style="font-family:'Courier 10 Pitch'">Courier 10 Pitch</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column ">
      <div class="one wide column">
        {{col-pick-input value=fontcol4 onChange=(action (mut fontcol4)) }}
      </div>
    </div>
    <div class="center aligned column">
      <div class="one wide cloumn">
        {{#ui-dropdown class="selection" selected=font4 onChange=(action (mut font4))}}
          <div class="default text">10</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="7">7</div>
            <div class="item" data-item="8">8</div>
            <div class="item" data-item="9">9</div>
            <div class="item" data-item="10">10</div>
            <div class="item" data-item="11">11</div>
            <div class="item" data-item="12">12</div>
            <div class="item" data-item="13">13</div>
            <div class="item" data-item="14">14</div>
            <div class="item" data-item="15">15</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column">
      <div class="ui toggle checkbox">
        <input name="public" type="checkbox" checked="checked">
        <label></label>
      </div>
    </div>
  </div>

  <div class="five column row">
    <div class="center aligned column  labels">Handle (e.g. Github)</div>
    <div class="center aligned column  ">
      <div class="one wide column">
        {{#ui-dropdown class="selection" selected=fonttype5 onChange=(action (mut fonttype5))}}
          <div class="default text">Helvetica</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="Lato" style="font-family:'Lato'">Lato</div>
            <div class="item" data-item="sans" style="font-family:'sans'">Sans</div>
            <div class="item" data-item="Courier-Bold" style="font-family:'Courier-Bold'">Courier</div>
            <div class="item" data-item="Helvetica" style="font-family:'Helvetica'">Helvetica</div>
            <div class="item" data-item="Times-Bold" style="font-family:'Times-Bold'">Times-Bold</div>
            <div class="item" data-item="monospace" style="font-family:'monospace'">Mono Space</div>
            <div class="item" data-item="Times-Roman" style="font-family:'Times-Roman'">Times-Roman</div>
            <div class="item" data-item="Courier 10 Pitch" style="font-family:'Courier 10 Pitch'">Courier 10 Pitch</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column ">
      <div class="one wide column">
        {{col-pick-input value=fontcol5 onChange=(action (mut fontcol5)) }}
      </div>
    </div>
    <div class="center aligned column">
      <div class="one wide cloumn">
          {{#ui-dropdown class="selection" selected=font5 onChange=(action (mut font5))}}
          <div class="default text">10</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-item="7">7</div>
            <div class="item" data-item="8">8</div>
            <div class="item" data-item="9">9</div>
            <div class="item" data-item="10">10</div>
            <div class="item" data-item="11">11</div>
            <div class="item" data-item="12">12</div>
            <div class="item" data-item="13">13</div>
            <div class="item" data-item="14">14</div>
            <div class="item" data-item="15">15</div>
          </div>
        {{/ui-dropdown}}
      </div>
    </div>
    <div class="center aligned column">
      <div class="ui toggle checkbox">
        <input name="public" type="checkbox" checked="checked">
        <label></label>
      </div>
    </div>
  </div>
</div>
